<template>
  <div class="website-list">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="filter-section">
        <div class="filter-header" @click="toggleCategoryPanel">
          <h3>分类筛选</h3>
          <span class="toggle-icon">{{ isCategoryPanelOpen ? '−' : '+' }}</span>
        </div>
        <transition name="slide">
          <ul v-show="isCategoryPanelOpen">
            <li 
              :class="{ active: selectedCategory === null && !showMovieRecommendations }"
              @click="selectCategory(null)"
            >
              <span>全部</span>
              <span class="category-count">{{ websites.length }}</span>
            </li>
            <li 
              v-for="category in categories" 
              :key="category"
              :class="{ active: selectedCategory === category }"
              @click="selectCategory(category)"
            >
              <span>{{ category }}</span>
              <span class="category-count">{{ getCategoryCount(category) }}</span>
            </li>
          </ul>
        </transition>
      </div>
      
      <!-- 影视推荐切换按钮 -->
      <button 
        @click="toggleMovieRecommendations" 
        class="movie-toggle-btn"
        :class="{ active: showMovieRecommendations }"
      >
        影视推荐
      </button>
      
      <!-- 管理员添加网站按钮（仅管理员可见） -->
      <div class="admin-add-website" v-if="isAdmin">
        <button @click="showAddWebsiteForm" class="add-website-btn">
          <span>+</span> 添加网站
        </button>
      </div>
    </aside>
    
    <!-- 主内容区 -->
    <main class="main-content">
      <div class="header">
        <div class="header-title">
          <h1 v-if="!showMovieRecommendations">网站推荐系统</h1>
          <h1 v-else>影视推荐</h1>
          <div class="user-status" v-show="!showMovieRecommendations">
            <span v-if="isAdmin" class="admin-badge">管理员模式</span>
            <span v-else class="guest-badge">游客模式</span>
          </div>
        </div>
        
        <div class="header-controls">
          <!-- 主题切换滑动按钮 -->
          <div class="theme-toggle-container">
            <transition name="fade" mode="out-in">
              <span 
                v-if="currentTheme === 'light'" 
                class="theme-label light-theme-label"
                :key="'light-label-' + currentTheme"
              >
                浅色
              </span>
            </transition>
            
            <div 
              class="theme-toggle-switch"
              :class="{ 'dark-theme': currentTheme === 'dark' }"
              @click="toggleTheme"
            >
              <transition name="slide-fade" mode="out-in">
                <div 
                  v-if="currentTheme === 'light'" 
                  class="theme-icon sun-icon"
                  :key="'sun-' + currentTheme"
                >
                  ☀️
                </div>
                <div 
                  v-else 
                  class="theme-icon moon-icon"
                  :key="'moon-' + currentTheme"
                >
                  🌙
                </div>
              </transition>
            </div>
            
            <transition name="fade" mode="out-in">
              <span 
                v-if="currentTheme === 'dark'" 
                class="theme-label dark-theme-label"
                :key="'dark-label-' + currentTheme"
              >
                深色
              </span>
            </transition>
          </div>
          
          <!-- 管理员控制 -->
          <div class="admin-control" v-show="!showMovieRecommendations">
            <button v-if="!isAdmin" @click="showLoginPrompt" class="login-btn">管理员登录</button>
            <div v-else class="admin-actions-header">
              <span class="admin-badge">管理员</span>
              <button @click="logout" class="logout-btn">登出</button>
            </div>
          </div>
          
          <div class="sorting" v-if="!showMovieRecommendations">
            <span>排序:</span>
            <select v-model="sortOption" @change="sortWebsites">
              <option value="createdAt">创建时间</option>
              <option value="name">名称</option>
            </select>
          </div>
        </div>
      </div>
      
      <!-- 影视推荐内容 -->
      <div v-if="showMovieRecommendations" class="movie-recommendations">
        <div class="movie-grid">
          <div 
            v-for="movie in movieRecommendations" 
            :key="movie.title"
            class="movie-card"
          >
            <!-- 上部分：影视名称 -->
            <div class="movie-title-section" @click="goToDoubanSearch(movie.title)">
              <div class="movie-title">{{ movie.title || '未知电影' }}</div>
            </div>
            
            <!-- 中部分：图片 -->
            <div class="movie-image-section">
              <img :src="movie.image" :alt="movie.title">
            </div>
            
            <!-- 下部分：推荐信息 -->
            <div class="movie-info-section">
              <div class="movie-info-header">
                <span class="movie-year">{{ movie.year }}</span>
                <span class="movie-rating">{{ movie.rating }}</span>
              </div>
              <div class="movie-director">导演: {{ movie.director }}</div>
              <div class="movie-tags">
                <span v-for="tag in movie.tags" :key="tag" class="movie-tag">{{ tag }}</span>
              </div>
              <div class="movie-description-container">
                <div 
                  class="movie-description"
                  :style="getMovieDescriptionStyle(movie.title)"
                >
                  {{ movie.description }}
                </div>
              </div>
            </div>
            
            <!-- 展开/收起按钮 -->
<!--            <button @click="toggleMovieDetails(movie.title)" class="movie-toggle-btn">-->
<!--              {{ isMovieExpanded(movie.title) ? '收起' : '展开详情' }}-->
<!--            </button>-->
          </div>
        </div>
      </div>
      
      <!-- 网站推荐内容 -->
      <template v-else>
        <!-- 当前分类显示 -->
        <transition name="fade" mode="out-in">
          <div class="current-category" v-if="selectedCategory" :key="'with-category-' + selectedCategory">
            当前分类: <span class="category-tag">{{ selectedCategory }}</span>
            <button @click="selectCategory(null)" class="clear-category">清除筛选</button>
          </div>
          <div v-else :key="'without-category-' + currentPage"></div>
        </transition>
        
        <!-- 网站卡片网格 -->
        <transition name="fade" mode="out-in">
          <div class="websites-grid" v-if="paginatedWebsites.length > 0" :key="'with-data-' + (selectedCategory || 'all')">
            <transition-group name="card" tag="div" class="websites-grid-inner">
              <div 
                class="website-card" 
                v-for="website in paginatedWebsites" 
                :key="website.id"
              >
                <h2>
                  <a 
                    :href="formatWebsiteUrl(website.url || website.linke)" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    @click.prevent="openWebsite(website.url || website.linke)"
                  >
                    {{ website.name }}
                  </a>
                </h2>
                <p class="description">{{ website.description || website.con }}</p>
                <div class="meta">
                  <span class="category">{{ website.category || website.lei }}</span>
                  <span class="created-at">{{ formatDate(website.createdAt || website.creatTime) }}</span>
                </div>
                <div v-if="isAdmin" class="admin-actions-card">
                  <button @click="editWebsite(website.id)" class="edit-btn">编辑</button>
                  <button @click="deleteWebsite(website.id)" class="delete-btn">删除</button>
                </div>
              </div>
            </transition-group>
          </div>
          
          <!-- 空状态提示 -->
          <div v-else class="empty-state" :key="'empty-' + (selectedCategory || 'all')">
            <p>暂无网站数据</p>
          </div>
        </transition>
        
        <!-- 分页控件 -->
        <transition name="fade" mode="out-in">
          <div class="pagination" v-if="totalPages > 1" :key="'with-pagination-' + totalPages">
            <button 
              :disabled="currentPage === 1" 
              @click="changePage(1)"
              class="pagination-btn"
            >
              首页
            </button>
            
            <button 
              :disabled="currentPage === 1" 
              @click="changePage(currentPage - 1)"
              class="pagination-btn"
            >
              上一页
            </button>
            
            <div class="page-numbers">
              <button
                v-for="page in visiblePages"
                :key="page"
                :class="{ active: currentPage === page }"
                @click="changePage(page)"
                class="page-number"
              >
                {{ page }}
              </button>
            </div>
            
            <button 
              :disabled="currentPage === totalPages" 
              @click="changePage(currentPage + 1)"
              class="pagination-btn"
            >
              下一页
            </button>
            
            <button 
              :disabled="currentPage === totalPages" 
              @click="changePage(totalPages)"
              class="pagination-btn"
            >
              末页
            </button>
            
            <div class="pagination-info">
              <span class="page-info">
                第 {{ currentPage }} 页，共 {{ totalPages }} 页 (共 {{ filteredWebsites.length }} 个项目)
              </span>
            </div>
          </div>
          <div v-else :key="'without-pagination-' + totalPages"></div>
        </transition>
      </template>
      
      <!-- 登录提示框 -->
      <transition name="modal">
        <div v-if="showLoginDialog" class="modal-overlay" @click="closeLoginDialog">
          <div class="modal-content" @click.stop>
            <h3>管理员登录</h3>
            <div class="form-group">
              <label for="modal-username">用户名:</label>
              <input 
                type="text" 
                id="modal-username" 
                v-model="loginUsername" 
                required
              />
            </div>
            <div class="form-group">
              <label for="modal-password">密码:</label>
              <input 
                type="password" 
                id="modal-password" 
                v-model="loginPassword" 
                required
              />
            </div>
            <div class="modal-actions">
              <button @click="performLogin">登录</button>
              <button @click="closeLoginDialog">取消</button>
            </div>
            <p v-if="loginError" class="error">{{ loginError }}</p>
          </div>
        </div>
      </transition>
      
      <!-- 添加网站表单 -->
      <transition name="modal">
        <div v-if="showAddForm" class="modal-overlay" @click="closeAddForm">
          <div class="modal-content" @click.stop>
            <h3>添加新网站</h3>
            <div class="form-group">
              <label for="add-name">网站名称:</label>
              <input 
                type="text" 
                id="add-name" 
                v-model="newWebsite.name" 
                required
              />
            </div>
            <div class="form-group">
              <label for="add-url">网站链接:</label>
              <input 
                type="text" 
                id="add-url" 
                v-model="newWebsite.url" 
                placeholder="https://example.com"
              />
            </div>
            <div class="form-group">
              <label for="add-description">内容描述:</label>
              <textarea 
                id="add-description" 
                v-model="newWebsite.description" 
                required
              ></textarea>
            </div>
            <div class="form-group">
              <label for="add-category">分类:</label>
              <input 
                type="text" 
                id="add-category" 
                v-model="newWebsite.category" 
                required
              />
            </div>
            <div class="modal-actions">
              <button @click="addWebsite">添加</button>
              <button @click="closeAddForm">取消</button>
            </div>
          </div>
        </div>
      </transition>
    </main>
  </div>
</template>

<script src="./WebsiteList/WebsiteList.js"></script>

<style scoped src="./WebsiteList/WebsiteList.css"></style>